<template>
  <div class="info">
    <van-nav-bar title="我的资料" class="head">
      <template #left>
        <i
          @click="$router.push('/user')"
          class="iconfont iconbtn_nav_back myicon"
        ></i>
      </template>
    </van-nav-bar>
    <div>
      <van-cell
        title="头像"
        is-link
        class="userIcon"
        @click="$router.push('/edit?property=avatar')"
      >
        <img class="userImg" :src="userInfo.avatar" />
      </van-cell>
    </div>
    <div class="main">
      <van-cell-group>
        <van-cell
          title="昵称"
          :value="userInfo.nickname"
          is-link
          @click="$router.push('/edit?property=nickname')"
        >
        </van-cell>
        <van-cell title="性别" is-link @click="genderShow = true">
          <template #default>
            <span v-if="userInfo.gender === 0">未知</span>
            <span v-if="userInfo.gender === 1">男孩子</span>
            <span v-if="userInfo.gender === 2">女孩子</span>
          </template>
        </van-cell>
        <van-cell
          title="地区"
          :value="areaList.city_list[userInfo.area]"
          is-link
          @click="areaShow = true"
        >
          <!-- <template #default>
            <span>{{areaList.city_list[userInfo.area]}}</span>
          </template> -->
        </van-cell>
        <van-cell
          title="个人简介"
          :value="userInfo.intro"
          is-link
          @click="$router.push('/edit?property=intro')"
        >
        </van-cell>
      </van-cell-group>
    </div>
    <div class="btn">
      <van-button type="default" size="large" class="red" @click="logout"
        >退出登录</van-button
      >
    </div>
    <!-- 修改性别 -->
    <van-popup
      :close-on-click-overlay="false"
      v-model="genderShow"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-picker
        :default-index="userInfo.gender"
        title="性别"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="genderShow = false"
      />
    </van-popup>
    <!-- 修改地址 -->
    <van-popup
      :close-on-click-overlay="false"
      v-model="areaShow"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-area
        title="标题"
        :columns-num="2"
        :area-list="areaList"
        @cancel="areaShow = false"
        @confirm="areaConfirm"
        :value="userInfo.area"
      />
    </van-popup>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { removeLocal } from '@/utils/local'
import { editUser } from '@/api/user'
import areaList from '@/utils/area'
export default {
  data () {
    return {
      genderShow: false,
      areaShow: false,
      areaList: areaList,
      columns: ['未知', '男孩子', '女孩子']
    }
  },
  methods: {
    // 修改地址
    async areaConfirm (value) {
      // console.log(value[1].code)
      this.areaShow = false
      this.$toast.loading({
        duration: 0
      })
      const res = await editUser({ area: value[1].code })
      console.log(res)
      this.$store.dispatch('setUserInfo')
      this.$toast.success('性别修改成功')
    },
    // 修改性别
    async onConfirm (value, index) {
      this.genderShow = false
      this.$toast.loading({
        duration: 0
      })
      console.log({ gender: index })
      const res = await editUser({ gender: index })
      console.log(res)
      this.$store.dispatch('setUserInfo')
      this.$toast.success('性别修改成功')
    },
    // 退出登录
    logout () {
      this.$dialog
        .confirm({
          title: '您确定要退出吗?'
        })
        .then(() => {
          removeLocal()
          this.$router.push('/login')
        })
        .catch(() => {
          // on cancel
        })
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  }
}
</script>
<style lang="less">
.info {
  background-color: #f7f4f5;
  font-size: 14px;
  padding: 10px;
  .head {
    height: 50px;
    background-color: #fff;
    margin: -10px;
    margin-bottom: 10px;
    .myicon {
      font-size: 36px;
    }
  }
  .userIcon {
    display: flex;
    align-items: center;
    height: 60px;
    box-sizing: border-box;
    border-radius: 10px;
    background-color: #fff;
    margin-bottom: 10px;
    overflow: hidden;
    .userImg {
      vertical-align: middle;
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }
  .main {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 15px;
  }
  .btn {
    border-radius: 10px;
    overflow: hidden;
    .red {
      color: red;
    }
  }
}
</style>
